
<%@ page contentType="text/html; charset=utf-8" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" 
%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jqgrid.jsp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="/jsp/common/include.base.jsp" %>
<jsp:include page="/jsp/common/include.commoncode.jsp" flush="false"><jsp:param name="gp" value="1,2"/></jsp:include>
<%@ include file="/jsp/common/include.jqgrid.jsp" %>
<%@ include file="/jsp/common/include.form.jsp" %>
<style type="text/css">
    body { font-size: 12px; }
    
    .ui-jqgrid .ui-jqgrid-view, 
    .ui-jqgrid .ui-jqgrid-view input, 
    .ui-jqgrid .ui-jqgrid-view select, 
    .ui-jqgrid .ui-jqgrid-view textarea, 
    .ui-jqgrid .ui-jqgrid-view button { font-size:12px !important; }
    
    /* ui-icon 적용될 경우 block 엘리먼트로 CSS가 지정되므로, jqgrid colmodel의 align이 적용되지 않는다. 
    TODO: TD가 text-align:center CSS를 가지고 있는 경우로 셀렉터 제한  
    */
    td[role=gridcell] span.ui-icon { margin-left:auto; margin-right:auto; }
</style>
<script type="text/javascript">
//*************************************************************************
// 데이터 저장 - 시작
//*************************************************************************
function getRowData() {
    var rows = gridUtil.getRowData("list", delIds, lastrow, lastcol);	
		
	// 변경내역 로그
	if (console) { console.log(rows); }

	return rows;
}   

function call(type) {
    callAjax({
        urls: {
            "action.save": {
                url: "${pageContext.request.contextPath}/app/sample-jqgrid/save.json", 
                data: getRowData, 
                showAlert: true, 
                onsuccess: function() {  },
                onvalidate: function() { return true; }
            }
        },          
        type: type
    });
}	
//*************************************************************************
// 데이터 저장 - 종료
//*************************************************************************
// 그리드 편집 - 추가, 삭제 - 시작
//*************************************************************************
// 추가버튼 처리
function _add() {
	// 새로운 ID 생성
    function getNewId() {
        var rows = $("#list").jqGrid("getDataIDs");
        
        var max = 0;
        for (var i = 0; rows && i < rows.length; i++) {
            if ($.isNumeric(rows[i])) { max = Math.max(parseInt(rows[i]), max); }
        }

        return max + 1;
    }
	
	var newId = getNewId();
	
	gridUtil.addRow(
		"list", newId, {id: newId, d: $.datepicker.formatDate("yy-mm-dd", new Date())}, 2
	)
}

// 삭제된 데이터의 키값 저장
var delIds = [];

// 삭제버튼 처리
function _del() {
	// 체크박스로 선택된 row의 id배열 조회
    var ids = $("#list").jqGrid("getGridParam", "selarrrow");
    if (ids) {
    	$("#list").jqGrid("delGridRow", ids.join(","), {reloadAfterSubmit:false});
    	// 삭제된 row의 id값을 보관
    	delIds = delIds.concat(ids);
    }
}

//*************************************************************************
// 그리드 편집 - 추가, 삭제 - 종료
//*************************************************************************
// 초기작업 - 시작
//*************************************************************************
// 최종 변경 셀의 위치 (저장시 saveCell을 호출하여 편집 중인 값을 반영)
var lastrow = -1;
var lastcol = -1;

$(function() {
    // 그리드 구성 정보 설정
    $("#list").jqGrid({
    	editurl: "../../js/common/empty.json", // 삭제시 존재하지 않으면 오류 발생
    	cellEdit: true, // 편집(cell-edit type) 가능
        url: "sample.json",
        datatype: "json",
        mtype: "post",
        colNames: ["id", "컬럼-1", "컬럼-2", "컬럼-3", "컬럼-4", "컬럼-5"],
        colModel: [
            {name:"id", index:"id", hidden:true},
            {name:"a", index:"a", width:200, editable:true},
            {name:"b", index:"b", width:200, search:true},
            gridUtil.getCodeSelectColModel("c", 200, "1"),
            gridUtil.getDateColModel("d", 100),
            gridUtil.getCheckColModel("e", 100, "Y")
        ],
        cmTemplate: {sortable:false}, // 정렬기능제거
        sortname: "a",
        sortorder: "desc",
        multiselect: true,
        cellsubmit: "clientArray", // remote로 지정된다면 cellurl을 지정하고 현재 셀 에디팅 종료 즉시 반영된다.
        beforeEditCell: function(rowid, cellname, v, iRow, iCol) {
        	lastrow = iRow; lastcol = iCol;
        }
    });
	
    // jquery button UI
    $("button").button();
});
//*************************************************************************
// 초기작업 - 종료
//*************************************************************************
</script>
</head>
<body>
<div id="btnSet"><input id="c" type="checkbox"/>
<button type="button" id="btnAdd" onclick="_add()">추가</button>
<button type="button" id="btnDel" onclick="_del();">삭제</button>
<button type="button" id="btnSav" onclick="call('action.save');">저장</button>
</div>
<table id="list" style="width:800px;"><tr><td></td></tr></table>
</body>
</html>